import {AvatarBarInterface, AvatarInfo} from "../../interface/GuiInterface";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, View} from "../../../script/frame/apiModel/gui/React";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {ConfigKey, ResumeType} from "../../../script/constant/ConfigConstant";
import PercentBar from "../component/PercentBar";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {TextAlign} from "../../../script/frame/apiModel/adapter/adapterInterface/model1/IFrameAdapter";
import {CodeUtil} from "../../../script/frame/codeAdapter/CodeUtil";
import {Logger} from "../../../script/frame/apiModel/config/Logger";
import {DataRouter} from "../../../script/frame/dataSource/DataRouter";
import {DataRouterUtil} from "../../../script/utils/router/DataRouterUtil";

export interface IProp {
    getAvatarInfo: (player: PlayerModel) => AvatarInfo;
}
export interface IState {
    name: string;
    maxLife: number;
    life: number;
    maxMana: number;
    mana: number;
    lv: number;
    icon: string
    exp: number;
    resumeTime: number;
    maxResumeTime: number;
}

export default class AvatarBar extends AvatarBarInterface<IProp, IState> {
    constructor(props: IProps & IProp) {
        super(props);
        this.state = {
            name: "",
            visible: true,
            lv: 1,
            maxLife: 0,
            life: 0,
            maxMana: 0,
            mana: 0,
            exp: 0,
            resumeTime: 0,
            maxResumeTime: 0,
            icon: ""
        }
    }

    render = () => {
        const avatarBoard = Configer.getResource(ResourceKey.avatarBoard)
        const lineImage = Configer.getResource(ResourceKey.expBar);
        const disableBlp = Configer.getResource(ResourceKey.disableBlp);

        const avatarLife = Configer.getResource(ResourceKey.avatarLife);
        const avatarMana = Configer.getResource(ResourceKey.avatarMana);

        const avatarLineBack = Configer.getResource(ResourceKey.avatarLineBack);

        const initExp = Configer.getConfig(ConfigKey.initExp);
        const expBase = Configer.getConfig(ConfigKey.expBase);

        const left = 0.147;
        const top = 0.99;
        const exp = this.state.exp;
        const maxExp = DataRouterUtil.getMaxExpByLv(this.state.lv);

        const expSize = { w: 1 - left, h: 1 - top };

        const lifeSize = { w: 0.096, h: 0.02 };
        const manaSize = { w: 0.084, h: 0.02 };

        const backSize = { w: 0.186, h: 0.130 }

        const lv = this.state.lv;

        const paddingT = 0.004

        const lvSize = { w: 0.03, h: 0.03 };

        const iconSize = { w: 0.055, h: 0.091 };
        const iconPos = { x: 0.015, y: 0.014 };

        let height = iconSize.h;

        const maxResumeTime = this.state.maxResumeTime;
        const resumeTime = this.state.resumeTime;

        const resumeTypes = Configer.getConfig(ConfigKey.resumeTypes);

        const isAutoResume = CodeUtil.inArr(resumeTypes, ResumeType.autoResume);


        if (!CodeUtil.isNullOrZero(isAutoResume) && resumeTime > 0 && maxResumeTime > 0) {
            height = (height * resumeTime) / maxResumeTime;
        } else {
            height = 0.0001;
        }

        const iconPath = DataRouter.getResourceDataByResourceId(this.state.icon)?.src;

        return <View   key={GuiKeys.heroAvatarBar} style={{ width: backSize.w, height: backSize.h, left: 0.268, top: 0.857 }}>
            <View   key={GuiKeys.heroAvatarBarAvatar} style={{ height: iconSize.h, width: iconSize.w, float: true, backgroundImage: iconPath, marginL: iconPos.x, marginT: iconPos.y }}>
                <View   key={GuiKeys.heroAvatarBarAvatarMask} style={{ height: height, width: iconSize.w, float: true, backgroundImage: disableBlp }}></View>
                <View   key={GuiKeys.heroAvatarBarAvatarText} style={{ hidden: (this.state.resumeTime === 0), height: iconSize.h, width: iconSize.w, float: true }}>{resumeTime}</View>
            </View>
            <View   key={GuiKeys.heroAvatarBarLifeCon} style={{ height: lifeSize.h, width: lifeSize.w, marginT: 0.044, marginL: 0.071 }}>
                <PercentBar   key={GuiKeys.heroAvatarBarLife}   fontSize={0.01} marginT={paddingT} max={this.state.maxLife} current={this.state.life} back={avatarLineBack} line={avatarLife} width={lifeSize.w} height={lifeSize.h} showPercent={true} ></PercentBar>
            </View>
            <View   key={GuiKeys.heroAvatarBarManaCon} style={{ height: manaSize.h, width: manaSize.w, marginT: 0, marginL: 0.069 }}>
                <PercentBar   key={GuiKeys.heroAvatarBarMana}   fontSize={0.01} marginT={paddingT} max={this.state.maxMana} current={this.state.mana} back={avatarLineBack} line={avatarMana} width={manaSize.w} height={manaSize.h} showPercent={true} ></PercentBar>
            </View>

            <View   key={GuiKeys.heroAvatarBarBack} style={{ height: backSize.h, width: backSize.w, float: true, backgroundImage: avatarBoard }}></View>

            <View   key={GuiKeys.heroAvatarBarName} style={{ height: lifeSize.h, width: lifeSize.w, float: true, marginT: 0.018, marginL: 0.074 }}>{this.state.name}</View>
            <View   key={GuiKeys.heroAvatarBarLv} style={{ height: lvSize.h, width: lvSize.w, fontAlign: TextAlign.center, float: true, marginT: 0.105, marginL: 0.006, fontSize: 0.013 }}>{lv}</View>
            <View   key={GuiKeys.heroAvatarBarExpCon} style={{ left: left, top: top, height: expSize.h, width: expSize.w }}>
                <PercentBar   key={GuiKeys.heroAvatarBarExp}   fontSize={0.01} marginT={0} max={maxExp} current={exp} back={undefined} line={lineImage} width={expSize.w} height={expSize.h} showPercent={true} ></PercentBar>
            </View>
        </View>
    }

    openBar = () => {
        const info = this.props.getAvatarInfo(PlayerFactory.getInstance().getLocalPlayer());
        this.setState({
            ...this.state,
            icon: info.icon,
            lv: info.lv,
            maxLife: info.maxLife,
            life: info.life,
            maxMana: info.maxMana,
            mana: info.mana,
            exp: info.exp,
            name: info.name,
            resumeTime: info.resumeTime,
            maxResumeTime: info.maxResumeTime,
        })
    }

    getVisible = () => {
        return true
    }
}